<template>
  <div class="center_son_map">
    <div class="son_map1"></div>
    <div class="son_map2"></div>
    <div class="son_map3"></div>
    <div class="son_btn">
      <button>累计确诊</button>
      <button>已有确诊</button>
    </div>
    <div class="map"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import "@/commonfun/world.js"; //世界地图模板
import { dataMap } from "@/commonfun/dataMap.js"; //地图用数据
import { nameMap } from "@/commonfun/nameMap.js"; //中英文转换文件
export default {
  name: "centermap",
  data() {
    return {};
  },
  computed: {},
  methods: {
    centermap() {
      var myChart = echarts.init(document.querySelector(".map"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            var value = params.value + "";
            return (
              params.seriesName + "<br/>" + params.name + " : " + value + "人"
            );
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: {
              readOnly: false,
            },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          // 设置映射类型：piecewise分段型、continuous连续性
          // type: "piecewise", //设置连续性
          pieces: [
            { max: 0, label: "0", color: "#eee" },
            { min: 1, max: 499, label: "1-499", color: "#fff7ba" },
            { min: 500, max: 4999, label: "500-4999", color: "#ffc24b" },
            { min: 5000, max: 9999, label: "5000-9999", color: "#ff7c20" },
            { min: 10000, max: 100000, label: "1万-10万", color: "#fe5e3b" },
            { min: 100000, max: 500000, label: "10万-50万", color: "#e2482b" },
            { min: 500000, label: "50万以上", color: "#b93e26" },
          ],
          itemHeight: 10,
          itemWidth: 10,
          inverse: true,
          bottom: "20%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "新型冠状病毒肺炎疫情地图",
            data: dataMap,

            nameMap: nameMap,

            type: "map",

            mapType: "world",

            itemStyle: {
              emphasis: {
                areaColor: "#c9ffff",
                label: {
                  show: false,
                },
              },
            },
            layoutCenter: ["48%", "50%"],
            layoutSize: "80%",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.centermap();
  },
  created() {},
};
</script>
<style scoped lang="scss">
.center_son_map {
  position: relative;
  height: 810px;
  .son_map1 {
    width: 400px;
    height: 400px;
    background: url("../assets/image/map.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .son_map2 {
    width: 468px;
    height: 468px;
    background: url(../assets/image/lbx.png) no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: 100%;
    animation: sonMap2 10s linear infinite;
  }
  .son_map3 {
    width: 430px;
    height: 430px;
    background: url(../assets/image/jt.png) no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 100%;
    animation: sonMap3 1s linear infinite;
  }
  @keyframes sonMap2 {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes sonMap3 {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
  .son_btn {
    top: 40px;
    display: flex;
    justify-content: space-around;

    button {
      height: 40px;
      width: 150px;
      border-radius: 30px;
      font-size: 20px;
      color: #fff;
      z-index: 10;
      background-color: rgba($color: #f6f0f0, $alpha: 0.3);
      background-color: #62b6ff3d;
      border: none;
      color: white;
      cursor: pointer;
    }
  }
  .map {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    height: 810px;
    width: 100%;
  }
}
</style>
